<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	
	<link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
	<link rel="stylesheet" type="text/css" href="../../css/tt/list-table-cell.css"/>
	<style type="text/css">
		.mui-ellipsis-2{
			-webkit-line-clamp: 3;
			font-size: 17px ;
			text-indent: 0px;
			/* font-weight: bold; */
		}
		
		.list-detail{
			margin-top: 5px;
			font-size: 15px;
			color: darkgrey;
			text-indent: 0px;
		}
		li{
			margin-top: 8px;
			padding-bottom: 2px;
			margin: 1px;
			
			border-width: 1px;
			border-color: #e0e0e0;
			border-style: solid;
			border-radius: 5px;
		}
		
		/* 清除列表选中时背景色 */
		.mui-table-view-cell > a:not(.mui-btn).mui-active {
			background-color: #fff;
		}
		
		.mui-table-view:before ,.mui-table-view:after{
			height: 0px;
			
		}
		
		.mui-table-view-cell:after {
	/* 	  position: absolute;
		  right: 0;
		  bottom: 0;
		  left: 15px; */
		  height: 0px;
/* 		  content: '';
		  -webkit-transform: scaleY(.5);
		  transform: scaleY(.5);
		  background-color: #c8c7cc; */
		}

		.avatar-icon{
			height : 20px;
			width : 20px 
			/* border-radius: 50%; */
			margin-top: 2px;
			float: left;
		}
		
		.mui-table-view-cell{
			margin-top: 8px;
			margin-left: 10px;
			margin-right: 10px;
		}
		
		[v-cloak]{
			display: none;
		}
	</style>
</head>
<body style="background-color: white;">
	<div id="list" class="mui-scroll" style="padding-top: 5px; padding-bottom: 30px;background-color: white;">
		<ul class="mui-table-view" id="table-view-id" v-cloak >	
			<li  class="mui-table-view-cell"  v-for="item in items">
				<a @tap="tableViewDidClicked(item)">
					<div class="mui-media-body">
						<div class="mui-ellipsis-2">
							{{item.content.title}}
						</div>
						
						<div class="list-detail mui-ellipsis-2">
							{{_formatterContent(item.content.content)}}
						</div>
					</div>
					
					<img  v-if="item.flag" v-bind:src="item.imageUrl" alt="" v-bind:style="{width:item.width + 'px' , height:item.width + 'px' , marginTop:'10px' , borderRadius:'5px'}" >
					
					<div>
						<div style="">
							<img v-bind:src="item.user.avatar_thumb" alt="../../images/default_avatar.png "class="avatar-icon"  style="border-radius: 50%;width:25px;height: 25px; margin-top: 8px;" >
							<div style="display: inline-block;color: #666;font-size: 13px;margin-left: 5px;margin-top: 12px;margin-bottom: 0px;height: 20px;">
								{{item.user.name}} 
							</div>
							<div style="display: inline-block;color: #666;font-size: 13px;margin-left: 10px;">
								{{item.postDateFormatter}} <span style="margin-left: 8px;font-size: 12px;">阅读{{item.readCnt}}</span>
							</div>
						</div>
					</div>
				</a>
			</li>
		</ul>
	</div>

<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/p/api.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/p/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/p/date.formatter.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/p/open.page.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/p/hud.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/p/tt.refresh.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/p/user.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
		mui.init({
			pullRefresh: {
				container: '#list',
				down: {
					style: 'circle',
					// offset: '1px',
					auto: false,
					callback: pulldownRefresh
				},
				up: {
					contentrefresh: '正在加载...',
					callback: loadMoreData
				}
			}
	});

		var ztlist = new Vue({
			el: '#table-view-id',
			data: {
				items: []
			},
			methods:{
				_formatterContent:function(s){
					var _s = s.replace(/\$/g , '');
					return _s;
				}
			}
		});
		
		mui.plusReady(function () {
			var w = plus.webview.currentWebview();
			var _type = w.type;
			
			//刷新处理
			{
				///请求参数
				var pars = {
					"category":"friend" ,
					"subType":_type 
				}
				
				ttRefreshInit('#list',get_sy_url , pars , function(res){
					hud_close();
					_dataConvert(res);
				});
			}
			
			hud_show('加载中');
			refreshRequestData();
		})//plus


///数据转化处理
function _dataConvert(arr){
	if(arr == null || arr.length < 1){
		ztlist.items = [];
		return;
	}
	for (var i = 0; i < arr.length; i++) {
		var d = arr[i];
		var content = d['content'];
		content = content.replace(/\n/g,"$")
		var obj = JSON.parse(content);
		d['content'] = obj;
		var postDate = d['postDate'];
		d['postDateFormatter'] = dateUtils.format(postDate);
		
		var uname = d['user']['name'];
		var nick = d['user']['nickName'];
		if(uname == null || uname == ''){d['user']['name'] = nick;}
		
		//添加图片		
		var igStr = d['images'];
		if(igStr != null && igStr.length > 0){
			var igurlArr = igStr.split(',');
			// console.log(igurlArr.length);
			
			d['imageUrl'] = igurlArr[0];
			d['flag'] = 1;
			var w = (plus.screen.resolutionWidth - 30) / 3.0;
			d['width'] = w;
		}	
	}
	
	dataSourceArr.push.apply(dataSourceArr ,arr);
	
	//渲染列表
	ztlist.items = dataSourceArr;
}

//跳转详情页
function tableViewDidClicked(item){
	var h = plus.nativeUI.showWaiting();
	setTimeout(function(){
		h.close();
		openNewPage('../home/home-detail.html', '话题' , true,{'item':item , 'category':'zt'});
	} , 500)
	
}		
				
</script>
</body>
</html>